
page {
  height: 100%;
  overflow: hidden;
  background-color: transparent;
  font-family:Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
}
.viewport1 {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-size: cover; /* 或其他你需要的背景大小 */
  z-index: -1 /* 确保伪元素在内容之下 */
}
.viewport {
  height: 100%;
  padding: 0 20rpx;

}

/* 头部 */
.header {
  position: relative;
  color: #2F2C23;
  padding: 0rpx 10rpx ;
  // header1
  .header1{

    height: 80rpx;
    padding: 5rpx 0;
    position: relative;
    display: flex;
    line-height: 80rpx;
    vertical-align: middle;
    .title{
      font-size: x-large;
      font-weight: bold;
      flex:1;
      text-align: center;
    }
    .zushou{
      &::before{
        font-size: 50rpx;
      }
    }
    .zushou:active{
      color: #ED655E;
    }
    .searchself{
      position: absolute;
      left: 80rpx;
      &::before{
        font-size: 50rpx;
      }
    }
    .search{
      position: absolute;
      right: 80rpx;
      &::before{
        font-size: 50rpx;
      }
    }
    .search:active{
      color: #ED655E;
    }
    .rili{
      &::before{
        font-size: 50rpx;
      }
    }
    .rili:active{
      color: #ED655E;
    }
    .Active {
      color: #ED655E;
    }
  }
  // header2
  .header2{
    display: flex;
    margin-top: 30rpx;
    margin-right: 80rpx;
    justify-content: space-between;
    .time,.shouru,.zhichu{
      display: flex;
      flex-direction: column;
      .txt1{
        font-size:small;
        color: #939393;
        margin-bottom: 10rpx;
      }
    }
    .yingcang{

      font-size: small;
    }
    .refresh{
      position: absolute;
      top: 150rpx;
      right: 110rpx;
      &::before{
        font-size: 40rpx;
      }
    }
    .refresh:active{
      color: #ED655E;
    }
    .onlyMe{
      position: absolute;
      right: 35rpx;
      top: 150rpx;
      &::before{
        font-size: 45rpx;
      }
    }
    .onlyMe:active{
      color: #ED655E;
    }
    .account{
      height: 30rpx;
      width: 100rpx;
      position: absolute;
      right:  -100rpx;
      top:-10rpx;
      margin: 0 10rpx;
      padding: 10rpx 20rpx;
      text-align: center;
      line-height: 30rpx;
      border-radius: 60rpx;
      font-size: x-small;
      background-color: #f3f3f3;
    }
    .account:active{
      color: #686767
    }
  }
}

.Active {
  color: #ED655E;
}
/* 导航功能 */
.warn{
  background-color: #FFD700;
  box-shadow: 0 4rpx 6rpx #FFD700  !important

}
.orders {
   position: relative;
  top:30rpx;
  z-index: 99;
  padding: 20rpx 30rpx;
  margin: 0rpx 10rpx;
  border: 1rpx solid #ED655E;
  border-radius: 10rpx;
  box-shadow: 0 4rpx 6rpx rgba(228, 126, 126, 0.6);
  .title{
    font-size: small;
  }
  .yscontent{
    margin-top: 30rpx;
    height: 100rpx;
    line-height: 50rpx;
    display: flex;
    justify-content: space-between;
    .right{
      display: flex;
      flex-direction: column;
    }
    .left{
      display: flex;
      .chart{
        width: 100rpx;
        height: 100rpx;
        position: relative;
        margin-right: 10rpx;
        line-height: 100rpx;
        text-align: center;
      }
    }
    .smallfont{
      font-size: small;
    }
    .gray{
      color: black;
    }
    .boldfont{
      font-weight: bold;
    }
  }
}
.scroll{
  padding-top: 50rpx;
  padding-bottom: 150rpx;
}
//具体明细
.content{
  margin: 10rpx 10rpx 160rpx 0;
.detail{
  display:flex;
  flex-direction: column;
  margin: 0rpx 0 20rpx 0;
  padding: 0 10rpx 5rpx 10rpx;

  .tip{
    display: flex;
    justify-content: space-between;
    font-size: small;
    font-weight: bold;
    color: black;
  }
  .content{
    display:flex;
    justify-content: space-between;
    margin:10rpx 0;
    border-bottom:1rpx #939393 solid;
    .name{
      display:flex;
      color: black;
      line-height: 60rpx;
      .circle {
        width: 60rpx;
        height: 60rpx;
        margin-right: 20rpx;
        border-radius:50%;
        background-color: #f3f3f3;
        color: #FF7B94;
        text-align: center;
        line-height: 60rpx;
      }
      .circleColorMan {
        color: #18bc37!important;
      }
      .circleColorGril {
        color: #FF7B94;
      }
      .userName{
        margin-left: 20rpx;
        font-size: small;
        color: #5f5d5d;
      }
    }
  }
}
}
//弹出层
.popup{
  height: 800rpx;
  padding: 20rpx;
  .pheader{
    height: 40rpx;
    display: flex;
    justify-content:space-between;
    .title{
      flex:1;
      font-size:medium;
      font-weight: bold;
      margin-left: 30rpx;
    }
    .btn{
      display: block;
      width: 100rpx;
      height: 40rpx;
      line-height: 40rpx;
      margin: 0 10rpx;
      padding: 10rpx 20rpx;
      text-align: center;
      border-radius: 60rpx;
      font-size: small;
      background-color: #fff;
    }
    .del{
      color: white;
      background-color: #939393;
    }
    .ok{
      color: #FF7B94;
      background-color: #f7e8e6;
    }
  }
  .content{
    margin-top: 40rpx;
    padding: 30rpx;
    background-color: #fff;
    border-radius: 10rpx;
    .Good{
      height: 60rpx;
      line-height: 60rpx;
      display: flex;
      .circle {
        width: 60rpx;
        height: 60rpx;
        margin-right: 20rpx;
        border-radius:50%;
        background-color: #f3f3f3;
        color: #FF7B94;
        text-align: center;
        line-height: 60rpx;
      }
      .userName{
        flex:1;
        margin-left:10rpx;
        vertical-align: bottom;
        font-size: small;
        color: #939393;
      }
    }
    .zhichu{
      height: 50rpx;
      display: flex;
      justify-content: space-between;
      line-height: 50rpx;
      margin: 50rpx 0 15rpx 0;
    }
    .time{
      height: 50rpx;
      display: flex;
      justify-content: space-between;
      line-height: 50rpx;
      margin: 15rpx 0;
    }
  }
}
.searchPup{
  height: 900rpx;
  margin-top: 40rpx;
  padding: 30rpx 10rpx;
  background-color: #fff;
  border-radius: 10rpx;
}
.uni-input{
  height: 50rpx;
  margin-left: 10rpx;
  padding-left: 15rpx;
  border: 1rpx solid #939393;
}
.searchbox{
  height: 50rpx;
  display: flex;
  justify-content: space-between;
  line-height: 50rpx;
  margin: 10rpx 0 10rpx 0;
}
.bold{
  font-weight: bold;
}
.right{
  position: absolute;
  right: 150rpx;
  &::before{
    font-size: 50rpx;
  }
}
.tag{
}
